<template>
<view class="page-wrap">
  <image class="page-bg" src="/yixu/static/images/super_card/bg.png" mode="aspectFill"></image>
  <view class="top-area">
    <view class="title">蓝豹咨询</view>
    <view class="desc">以信为本，助你轻松贷款</view>
  </view>
  <view class="card-info-wrap">
    <image class="card-shadow" src="/yixu/static/images/super_card/card_shadow.png"></image>
    <view class="card-info">
      <view class="card-inner">
        <view class="card-left-wrap">
          <view class="row-1">
            <view class="username">{{ d.name }}</view>
            <view class="role">{{ d.position }}</view>
          </view>
          <view class="row-2">
            <view v-for="item in d.lable_lis" :key="item.id">{{ item.name }}</view>
          </view>
          <view class="row-3">
            {{ d.intro }}
          </view>
        </view>
        <view class="card-right-wrap">
          <image class="avatar" :src="d.abs_avatar"></image>
        </view>
      </view>
      <view class="kpi-wrap">
        <view class="kpi-item">
          <view>{{ d.work_year }}
            <text>年</text>
          </view>
          <view>从业时长</view>
        </view>
        <view class="kpi-item">
          <view>{{ d.score }}
            <text>分</text>
          </view>
          <view>专业评分</view>
        </view>
        <view class="kpi-item">
          <view>{{ d.client_count }}
            <text>人</text>
          </view>
          <view>服务人数</view>
        </view>
      </view>
    </view>
  </view>

  <view class="profile-desc-wrap">
    <view class="profile-desc-inner">
      <view class="title-wrap">
        <image class="title-img" src="/yixu/static/images/super_card/grjj.png" mode="aspectFit"></image>
      </view>
      <view class="desc-text" :style="d.lable_lis === 0 ? 'border:unset;':''">
        {{ d.intro }}
      </view>
      <view class="tag-wrap">
        <view class="tag-item" :class="item.active && 'active'" v-for="item in d.lable_lis" :key="item.id"
              @click="onTagLike(item)">
          <text>{{ item.name }}</text>
          <u-icon name="thumb-up" :color="item.active ? '#3F70FF' :'#999999'" size="28"></u-icon>
        </view>
      </view>
    </view>
  </view>

  <view class="profile-score-wrap">
    <view class="profile-score-inner">
      <view class="title-wrap">
        <image class="title-img" src="/yixu/static/images/super_card/zypf.png" mode="aspectFit"></image>
      </view>
      <view class="score-desc" style="font-size: 26rpx; line-height: 1.6;padding-top: 20rpx;">
        根据{{ d.name }}的从业经历，掌握的业务知识，以及对客户的服务专业度等，综合评分为：
        <text style="color: red;font-weight: bold;">{{ d.score }}分</text>
      </view>
    </view>
  </view>
  <view class="profile-score-wrap" v-if="showBlock('certificate_lis',true)">
    <view class="ce-inner">
      <view class="title-wrap">
        <image class="title-img" src="../../static/images/super_card/zyzs.png" mode="aspectFit"></image>
        <text>注重合规</text>
      </view>
      <navigator url="/yixu/pages/super_card/perfect" v-if="d.certificate_lis.length === 0">
        <view class="add-area">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加专业证书</text>
          </view>
          <view>补全证书，让客户更好了解您的专业</view>
        </view>
      </navigator>
      <view class="ce-list">
        <view class="ce-item" v-for="item in d.certificate_lis" :key="item.id">
          <image class="left-icon" :src="item.image"></image>
          <view class="ce-info">
            <view class="row-1">
              <text>{{ item.type }}</text>
              <image class="rz-tag" src="../../static/images/super_card/rztag.png" mode="aspectFit">
              </image>
            </view>
            <view class="row-2">
              证书编号：{{ item.id_card }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="main-business-wrap" v-if="showBlock('case_lis',true)">
    <view class="main-business-inner">
      <view class="title-wrap">
        <image class="title-img" src="../../static/images/super_card/khal.png" mode="aspectFit"></image>
      </view>
      <navigator url="/yixu/pages/super_card/perfect" v-if="d.case_lis.length === 0">
        <view class="add-area">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加客户案例</text>
          </view>
          <view>上传实操案例，打破客户信任壁垒</view>
        </view>
      </navigator>

      <view class="product-item" v-for="item in d.case_lis" :key="item.id">
        <view>
          <view class="title ">{{ item.title }}</view>
          <view class="tag">#{{ item.situation }}</view>
          <view class="desc">{{ item.describe }}</view>
          <view class="images">
            <u-image v-for="img in item.abs_image" :key="img.id" :src="img.url" width="160" height="160"></u-image>
          </view>
        </view>
      </view>

    </view>
  </view>
  <view class="main-business-wrap" v-if="showBlock('goods_lis',true)">
    <view class="main-business-inner">
      <view class="title-wrap">
        <image class="title-img" src="../../static/images/super_card/zycp.png" mode="aspectFit"></image>
        <text>以信为本 专业服务</text>
      </view>
      <navigator url="/yixu/pages/super_card/perfect" v-if="d.goods_lis.length === 0">
        <view class="add-area">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加主营产品</text>
          </view>
          <view>添加主营产品，让客户更好了解您</view>
        </view>
      </navigator>
      <view class="main-business-list">
        <view class="main-business-item" v-for="item in d.goods_lis" :key="item.id">
          <view class="left-wrap">
            <view class="text-type">主营产品</view>
            <view class="info">
              <view class="row-1">
                <view>{{ item.name }}</view>
                <view>最高额度{{ item.limit }}万</view>
              </view>
              <view class="row-2">{{ item.advantage }}</view>
            </view>
          </view>
          <view class="right-wrap">
            <view>{{ item.rate }}</view>
            <view>年利率低至</view>
          </view>
        </view>
      </view>
    </view>

  </view>


  <view class="work-history-wrap" v-if="showBlock('education_lis',true) || showBlock('work_lis',true)">
    <view class="work-history-inner">
      <view class="title-wrap">
        <image class="title-img" src="/yixu/static/images/super_card/gzjl.png" mode="aspectFit"></image>
        <text>个人简历</text>
      </view>
      <view class="school-list" :style="d.work_lis.length === 0 ? 'border:unset;':''"
            v-if="showBlock('education_lis',true)">
        <view class="label">教育经历</view>
        <navigator url="/yixu/pages/super_card/perfect" v-if="d.education_lis.length === 0">
          <view class="add-area">
            <view>
              <u-icon name="plus-circle" size="34"></u-icon>
              <text>添加教育经历</text>
            </view>
            <view>点击添加，完善您的教育经历</view>
          </view>
        </navigator>
        <view class="school-item" v-for="item in d.education_lis" :key="item.id">
          <view class="name">{{ item.name }} {{ item.position }}</view>
          <view class="date">{{ item.start_date }} - {{ item.end_date }}</view>
        </view>
      </view>

      <view class="work-list" :style="d.education_lis.length === 0 ? 'border:unset;':''"
            v-if="showBlock('work_lis',true)">
        <view class="label">工作经历</view>
        <navigator url="/yixu/pages/super_card/perfect" v-if="d.work_lis.length === 0">
          <view class="add-area">
            <view>
              <u-icon name="plus-circle" size="34"></u-icon>
              <text>添加工作经历</text>
            </view>
            <view>点击添加，完善您的工作经历</view>
          </view>
        </navigator>
        <view class="work-item" v-for="item in d.work_lis" :key="item.id">
          <view class="name">{{ item.name }} {{ item.position }}</view>
          <view class="date">{{ item.start_date }} - {{ item.end_date }}</view>
        </view>
      </view>
    </view>

  </view>
  <view class="company-wrap" v-if=" showBlock('abs_company_honors_img',true)">
    <view class="company-inner">
      <view class="title-wrap">
        <image class="title-img" src="/yixu/static/images/super_card/gsjj.png" mode="aspectFit"></image>
      </view>
      <view class="company-desc-wrap">
        <u-image width="100%" height="300rpx" v-for="item in d.abs_company_honors_img" :src="item.path"></u-image>
      </view>
      <navigator url="/yixu/pages/super_card/perfect" v-if="!isShare">
        <view style="margin-top: 20rpx;" class="add-area">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加个人/公司照片</text>
          </view>
          <view>完善您的生活/工作照，让客户更了解您</view>
        </view>
      </navigator>
    </view>
  </view>
  <view class="footer-action-wrap" v-if="isShare">

    <u-button :hair-line="false" hover-class="none"
              :custom-style="{color:'#3F70FF',background:'#EBF0FF',borderColor:'#EBF0FF'}"
              @click="onFooterBtnClick('share')">
      <image class="btn-icon" src="/yixu/static/images/super_card/btn1.png"></image>
      推荐名片
    </u-button>
    <u-button :hair-line="false" hover-class="none"
              :custom-style="{color:'#FFFFFF',background:'#47BF4C',borderColor:'#47BF4C'}"
              @click="onFooterBtnClick('wx')">
      <image class="btn-icon" src="/yixu/static/images/super_card/btn2.png"></image>
      加微信
    </u-button>
    <u-button :hair-line="false" hover-class="none"
              :custom-style="{color:'#FFFFFF',background:'#3F70FF',borderColor:'#3F70FF'}"
              @click="onFooterBtnClick('tel')">
      <image class="btn-icon" src="/yixu/static/images/super_card/btn3.png"></image>
      打电话
    </u-button>
  </view>
  <view class="footer-action-wrap" v-else>
    <u-button :hair-line="false" hover-class="none"
              :custom-style="{color:'#3F70FF',background:'#EBF0FF',borderColor:'#EBF0FF'}"
              @click="onFooterBtnClick('edit')">
      编辑名片
    </u-button>

    <u-button :hair-line="false" hover-class="none"
              :custom-style="{color:'#FFFFFF',background:'#3F70FF',borderColor:'#3F70FF'}"
              @click="onFooterBtnClick('share')">
      分享名片
    </u-button>
  </view>
  <u-popup v-model="wxPopupShow" mode="center">
    <view class="wx-wrap">
      <view class="wx-inner">
        <view class="title">咨询请扫码加微信</view>
        <view class="qr-code">
          <u-image :src="d.wechat_qr_code" height="250" width="250"></u-image>
        </view>
        <view class="wx-num">微信号：{{ d.wechat_code }}</view>
        <view class="wx-copy" @click="onFooterBtnClick('copywx')">复制微信号</view>
      </view>
      <view class="close-icon-wrap" @click="wxPopupShow = false">
        <u-icon name="close-circle" color="white" size="60"></u-icon>
      </view>
    </view>
  </u-popup>
  <u-popup v-model="shareTipPopupShow" mode="center">
    <view class="w-full" style="height: 100vh;">
      <image style="width: 25%; height: 20%; position: absolute;right: 80rpx;top: 100rpx;"
             src="/yixu/static/images/share_tip/arrow.png" height="250" width="250"></image>
      <image style="height: 46rpx;width: 360rpx; position: absolute;right: 180rpx;top: 400rpx;"
             src="/yixu/static/images/share_tip/text_icon.png" height="250" width="250"></image>
    </view>
  </u-popup>
</view>


</template>

<script>
import {apiBusinessCardDetail, apiLabelLike} from "../../api/super_card.js";

export default {
  data() {
    return {
      d: {
        abs_company_honors_img: [],
        certificate_lis: [],
        work_lis: [],
        education_lis: [],
        goods_lis: [],
        case_lis: []
      },
      isShare: false,
      wxPopupShow: false,
      shareTipPopupShow: false,
    };
  },
  onLoad({user_id}) {
    if (user_id) {
      this.isShare = true;
    }
    this.getCardDetail(user_id);
  },
  methods: {
    async getCardDetail(user_id = undefined) {
      try {
        const result = await apiBusinessCardDetail({user_id});
        this.d = result.data;
        // this.cityText = result.data.company_province_name + '/' + result.data.company_city_name;
      } finally {

      }
    },
    async onTagLike(item) {
      if (item.active) return;
      await apiLabelLike({id: item.id});
      this.$set(item, 'active', true);
    },
    showBlock(field, isWrap) {

      let dataLen = this.d[field].length > 0;
      let isShare = this.isShare;
      if (isWrap) {
        if (isShare && !dataLen) {
          return false;
        }
      }

      return true;
    },
    onFooterBtnClick(action) {
      switch (action) {
        case 'edit':
          uni.navigateTo({
            url: '/yixu/pages/super_card/perfect'
          })
          break;
        case 'copywx':
          uni.setClipboardData({
            data: this.d.wechat_code,//要被复制的内容
            success: () => {
              uni.showToast({
                title: "复制成功",
                icon: 'none'
              })
            }
          });
          break;
        case 'share':
          this.shareTipPopupShow = true;

          break;
        case 'wx':
          this.wxPopupShow = true;
          break;
        case 'tel':
          uni.makePhoneCall({
            phoneNumber: this.d.tel
          })
          break;
      }
    }
  },
  onShareTimeline() {
    return {
      title: this.d.name + '的名片',
      imageUrl: this.d.avatar,
      summary: this.d.intro,
      path: "yixu/pages/super_card/detail?uid=" + this.d.user_id
    };
  },
  onShareAppMessage() {
    return {
      title: this.d.name + '的名片',
      imageUrl: this.d.avatar,
      summary: this.d.intro,
      path: "yixu/pages/super_card/detail?uid=" + this.d.user_id
    };
  },
}
</script>

<style lang="scss" scoped>

.wx-wrap {
  .wx-inner {
    background-color: white;
    width: 70vw;
    padding: 30rpx 30rpx 50rpx;
    text-align: center;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-weight: bold;
      padding-top: 50rpx;
      font-size: 36rpx;
    }

    .qr-code {
      border: 20rpx solid #eaf0ff;
      margin: 30rpx;
    }

    .wx-num {
      color: #999999;
      font-size: 32rpx;
    }

    .wx-copy {
      color: white;
      background-color: #3F70FF;
      width: 90%;
      margin-top: 20rpx;
      padding: 20rpx;
      border-radius: 10rpx;

    }
  }

  .close-icon-wrap {
    text-align: center;
    padding-top: 40rpx;
  }

}

.footer-action-wrap {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 20rpx 30rpx;
  border-radius: 20rpx 20rpx 0 0;
  justify-content: space-around;
  box-shadow: 0 -10rpx 10rpx rgba(190, 189, 189, 0.17);

  .btn-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
  }

}

@mixin card-wrap {
  margin: 30rpx;
  padding-bottom: 40rpx;
  border-radius: 20rpx;
  background: linear-gradient(180deg, #C6DEFF 0%, #FFFFFF 100%);
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 3 3;
  border-top: 3rpx solid;
}

@mixin card-inner($imgW,$imgH) {
  margin: 30rpx;
  padding: 30rpx;
  background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 100%);
  border-radius: 10rpx;

  .title-wrap {
    display: flex;
    align-items: center;
    gap: 14rpx;

    .title-img {
      width: $imgW;
      height: $imgH;
      margin-bottom: 10rpx;
    }

    text {
      color: #728AA8;
      font-size: 24rpx;
    }
  }
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2rpx solid #e0dddd;
  padding:30rpx 0;
  &:last-child{
    border-bottom: unset;
  }
  .title {
    font-weight: bold;
    letter-spacing: 1px;
  }

  .tag {
    color: #fa3534;
    font-size: 28rpx;
  }

  .desc {
    color: #999999;
    font-size: 28rpx;
  }

  .images {
    display: flex;
    gap: 20rpx;
    margin-top: 20rpx;
  }
}

.add-area {
  border-radius: 10px;
  width: 100%;
  padding: 40rpx;
  text-align: center;

  view:first-child {
    font-weight: 500;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      padding-left: 10rpx;
    }
  }

  view:last-child {
    color: #999999;
    font-weight: 400;
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}

.page-wrap {
  background: #F4F8FB;
  padding-bottom: 100rpx;

  .page-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;

  }

  .top-area {
    position: relative;
    z-index: 11;
    color: white;
    padding: 35px 15px 30px;

    .title {
      font-size: 24px;
      margin-bottom: 20rpx;
    }

    .desc {
      font-size: 14px;
      margin-top: 5px;
    }
  }

  .card-info-wrap {
    position: relative;

    .card-shadow {
      position: absolute;
      right: 0;
      top: -20px;
      left: 15px;
      width: 95%;
      transform: rotate(359deg);
    }
  }

  .card-info {
    position: relative;
    z-index: 1;
    margin: 0 15px;
    background: linear-gradient(180deg, #F1F4FF 0%, #FFFFFF 100%);
    padding: 20px 15px;
    border-radius: 10px;
    font-family: PingFang SC, serif;

    .card-inner {
      display: flex;
      gap: 10px;
      justify-content: space-between;

      .card-left-wrap {
        .row-1 {
          display: flex;
          align-items: baseline;

          .username {
            font-size: 22px;
            font-weight: bold;
            color: #161616;
          }

          .role {
            font-size: 14px;
            padding-left: 5px;
            color: #161616;
          }
        }

        .row-2 {
          display: flex;
          gap: 5px;
          margin: 10px 0;
          flex-wrap: wrap;

          view {
            background-color: #F3F8FF;
            color: #8E99B6;
            font-size: 11px;
            padding: 3px 7px;
            border-radius: 5px;
          }
        }

        .row-3 {
          color: #666666;
          font-size: 12px;
          line-height: 18px;
        }

      }
    }

    .card-right-wrap {
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 6px solid #FFFFFF;
        box-shadow: 0 10rpx 10rpx #F1F4FF;
      }
    }

    .kpi-wrap {
      display: flex;
      justify-content: space-around;
      padding: 20px 0 15px 0;

      .kpi-item {
        text-align: center;
        position: relative;
        flex: 1;

        &:last-child {
          &::after {
            width: 0;
          }
        }

        &::after {
          content: '';
          position: absolute;
          width: 2rpx;
          background-color: #F3F3F4;
          height: 40rpx;
          right: 0;
          top: 30rpx;
        }

        view {
          &:first-child {
            font-weight: bold;
            font-size: 48rpx;
            color: #3F70FF;
            margin-bottom: 4rpx;

            text {
              font-size: 24rpx;
              padding-left: 2rpx;
            }
          }

        }
      }
    }

  }
}

.profile-desc-wrap {
  @include card-wrap;

  .profile-desc-inner {
    @include card-inner(200rpx, 40rpx);


    .desc-text {
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #EEEEEE;
      line-height: 46rpx;
    }

    .tag-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      padding-top: 30rpx;

      .active {
        color: #3F70FF !important;
        border-color: #3F70FF !important;
      }

      .tag-item {
        border: 1rpx solid #EEEEEE;
        color: #999999;
        padding: 6rpx 20rpx;
        font-size: 26rpx;
        border-radius: 10rpx;

        text {
          margin-right: 10rpx;
        }

      }
    }

  }
}

.profile-score-wrap {
  @include card-wrap;

  .profile-score-inner {
    @include card-inner(140rpx, 30rpx);
  }

  .ce-inner {
    @include card-inner(140rpx, 40rpx);


    .title-wrap {
      display: flex;
      align-items: center;
      gap: 14rpx;

      .title-img {
        width: 140rpx;
        height: 40rpx;
        margin-bottom: 10rpx;
      }

      text {
        color: #728AA8;
        font-size: 24rpx;
      }
    }
  }

  .ce-list {
    .ce-item {
      display: flex;
      gap: 20rpx;
      padding: 15rpx 0;
      border-bottom: 2rpx solid #EEEEEE;

      &:last-child {
        border-bottom: unset;
      }

      .left-icon {
        width: 80rpx;
        height: 80rpx;
        flex-direction: 1;

      }

      .ce-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .rz-tag {
          width: 100rpx;
          height: 30rpx;
        }

        .row-1 {
          display: flex;
          align-items: center;

          text {
            font-weight: 500;
            font-size: 28rpx;
          }
        }

        .row-2 {
          font-size: 24rpx;
          color: #999999;
          line-height: 33rpx;
        }

      }
    }
  }
}


.main-business-wrap {
  @include card-wrap;

  .main-business-inner {
    @include card-inner(140rpx, 40rpx);
  }

  .main-business-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #EEEEEE;
    padding: 30rpx 0;

    &:last-child {
      border-bottom: unset;
    }
  }

  .left-wrap {
    display: flex;
    gap: 10rpx;
    align-items: center;

    .text-type {
      width: 90rpx;
      text-align: center;
      padding: 8rpx;
      background: #E0EDFF;
      color: #84ACE2;
      line-height: 1.2;
      border-radius: 8rpx;
    }

    .info {
      .row-1 {
        display: flex;
        gap: 10rpx;
        align-items: center;

        view:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
        }

        view:last-child {
          padding: 5rpx 8rpx;
          color: #3F70FF;
          background: #EBF0FF;
          font-size: 20rpx;
          height: fit-content;
        }
      }

      .row-2 {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .right-wrap {
    text-align: center;

    view:first-child {
      font-weight: bold;
      font-size: 32rpx;
      color: #FF3030;
    }

    view:last-child {
      font-size: 20rpx;
      color: #999999;
    }
  }


}


.work-history-wrap {
  @include card-wrap;

  .work-history-inner {
    @include card-inner(240rpx, 40rpx)
  }

  .work-list {
    border-bottom: unset !important;
  }

  .school-list, .work-list {
    padding: 30rpx 0;
    border-bottom: 2rpx solid #EEEEEE;

    .label {
      font-weight: 500;
      font-size: 30rpx;
      color: #161616;
      line-height: 32rpx;
      margin-bottom: 10rpx;
    }

    .school-item, .work-item {
      padding: 10rpx 0;
      font-weight: 400;
      font-size: 28rpx;
      color: #161616;

      .date {
        font-size: 26rpx;
        color: #999999;
        padding-top: 4rpx;
      }
    }
  }
}

.company-wrap {
  @include card-wrap;

  .company-inner {
    @include card-inner(140rpx, 40rpx);
  }

  .company-desc-wrap {
    padding-top: 20rpx;
  }
}
</style>
